<template>
	<div class="bottom_set">
		<div class="tab_con">
			<div class="tab_item" :class="currentIndex == index ? 'active' : ''" 
				@click="tabChange(item, index)" 
				v-for="(item, index) in sortTableList"
				:key="item?.name">
				<div class="tab_icon" v-if="index == 0">
					<cu-icon type="icon-tupian2" />
				</div>
				<div :style="{marginLeft: item.icon?'7px':'0px'}" class="tab_text">{{ item?.name }}</div>
				<!-- <div :style="{marginLeft: item.icon?'7px':'0px'}" class="tab_text">{{ item.name == '封面'? '封面' : '场景'+index }}</div> -->
				<cu-icon v-if="index!=0" class="operate_icon" type="icon-shanchu1"
					@click.stop="deleteTab(index)" />
			</div>
			<div class="tab_item add_item"
				key="add" @click="addTab(tabList?.length)">
				<div class="tab_text">+场景</div>
			</div>
		</div>

		<div class="second_con">
			<div class="second_item" @click="operateModal">
				<div class="left_icon">
					<cu-icon class="left_icon" :type="secondTab.icon" />
				</div>
				<div class="right_content">
					<div class="title">{{ secondTab?.name }}</div>
					<a-tooltip placement="topLeft" :title="secondTab?.desc">
						<div class="desc">{{ secondTab?.desc }}</div>
					</a-tooltip>
				</div>
			</div>
		</div>
		<div class="main_con">
			<addImageText :index="currentIndex" />
		</div>
		<imageTemplates :visible="templateVisible" :params="templateObj" @close="handleClose" />
	</div>
</template>

<script>
	let count = 1
	const INIT_TAB_LIST = [{
		sn: 1,
		name: "封面",
		type: 'audio',
		seconds: 5,
		image_tpl: 'single_image',
		images: [],
		texts: []
	},{
		sn: 2,
		name: "场景"+count++,
		type: 'audio',
		seconds: 5,
		image_tpl: 'single_image',
		images: [],
		texts: []
	}]
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import addImageText from './imageTextCom/addImageText.vue';
	import imageTemplates from './imageTextCom/imageTemplates.vue';
	import store from '@/store';
	export default defineComponent({
		components: {
			addImageText,
			imageTemplates
		},
		setup(props, context) {
			const state = reactive({
				currentIndex: 0,
				tabList: [...INIT_TAB_LIST],
				secondTab: {
					icon: "icon-tupian2",
					name: "图片模板",
					type: "image_template",
					desc: "单图"
				},
				templateVisible: false,
				templateObj: {},
				mapData: {
					'single_image':'单图',
					'couple_image_9_16':'两图(9:16)',
					'couple_image_16_9':'两图(16:9)',
					'couple_image_1_1':'两图(1:1)',
					'four_image_9_16':'四图(9:16)',
					'four_image_1_1':'四图(1:1)'
				}
			});
			
			state.currentIndex = 0;
			
			const tabChange = (item, index) => {
				if (state.currentIndex == index) return;
				state.currentIndex = index;
				let key = state.tabList[state.currentIndex]?.image_tpl
				state.secondTab.desc = state.mapData[key] 
			};

			const sortTableList = computed(()=>{
				let arr = state.tabList.map((item, index) => {
					console.log(index,'index');
					return {
						...item,
						name: item.name == '封面'? '封面' : "场景" + index,
					}
				})
				return arr
			})

			const addTab = (length) => {
					console.log(length,'length');
					state.tabList.push({
						icon: "",
						name: "场景"+length+1,
						type: 'audio',
						seconds: 5,
						image_tpl: 'single_image',
						images: [],
						texts: []
					})
					state.currentIndex = state.tabList?.length - 1
					store.dispatch('SetClipJSONResourceData', sortTableList.value)
					console.log(sortTableList.value,'添加');
			}
			
			const deleteTab = (index) => {
				if(state.currentIndex == index){
					state.currentIndex = 0
				}
				state.tabList.splice(index, 1)
				console.log(state.tabList,'删除', sortTableList.value);
				store.dispatch('SetClipJSONResourceData', sortTableList.value)
			}
			
			const handleClose = (obj) => {
				state.templateVisible = false
				if(obj){
					state.tabList[obj.index]['image_tpl'] = obj.type
					state.secondTab.desc = obj.name
					store.dispatch('SetClipJSONResourceData', sortTableList.value)
				}
			}
			
			const operateModal = () => {
				state.templateObj = state.tabList[state.currentIndex]
				state.templateObj['index'] = state.currentIndex
				state.templateVisible = true
			}
			
			watch(()=>store.getters.clipJSON?.resource_data, val=> {
				if(val?.length){
					state.tabList = val
					count = val?.length
					let key = state.tabList[state.currentIndex]?.image_tpl
					if(key){
						state.secondTab['desc'] = state.mapData[key]
					}
				} else {
					state.tabList = [...INIT_TAB_LIST]
					store.dispatch('SetClipJSONResourceData', sortTableList.value)
				}
			}, {
				deep: true,
				immediate: true
			})

			return {
				tabChange,
				addTab,
				deleteTab,
				handleClose,
				operateModal,
				...toRefs(state),
				sortTableList,
			};
		},
	});
</script>

<style lang="less" scoped>
	.bottom_set {
		width: 100%;
		height: 100%;
		background-color: #1e1e20;
		.tab_con {
			display: flex;
			overflow-y: hidden;
			overflow-x: scroll;
			&::-webkit-scrollbar {
				height: 0px;
			}
			
			// &::-webkit-scrollbar-track {
			// 	width: 5px;
			// 	background-color: transparent;
			// 	-webkit-border-radius: 4px;
			// 	-moz-border-radius: 4px;
			// 	border-radius: 4px;
			// }
			
			// &::-webkit-scrollbar-thumb {
			// 	background-color: rgba(193, 193, 193, 0.5);
			// 	background-clip: padding-box;
			// 	min-height: 28px;
			// 	-webkit-border-radius: 4px;
			// 	-moz-border-radius: 4px;
			// 	border-radius: 4px;
			// }
			
			.add_item{
				border: 1px solid #000;
				&:hover{
					border: 1px dashed #2878FF;
				}
			}
			
			.tab_item {
				flex-shrink: 0;
				padding: 6px 0;
				cursor: pointer;
				border-right: 2px solid #000;
				background-color: #121213;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				transition: all 0.3s;
				width: 200px;
				&.active {
					background-color: #1e1e20;

					.tab_icon {
						color: #2878FF;
					}

					.icon {
						color: #2878FF;
					}
				}
				
				&:hover{
					.operate_icon {
						display: block;
					}
				}
				
				.operate_icon {
					margin-left: 5px;
					display: none;
				}

				.tab_icon {
					font-size: 20px;
					margin-right: 5px;
				}

				.tab_text {
					font-size: 14px;
				}
			}
		}

		.second_con {
			display: flex;
			border-bottom: 0.5px solid #333;
			padding: 15px;

			.second_item {
				display: flex;
				align-items: center;
				margin-left: 20px;
				padding: 2px 10px;
				transition: all 0.3s;

				&:hover {
					border-radius: 6px;
					background-color: rgba(255, 255, 255, 0.12);
					cursor: pointer;
				}

				.left_icon {
					font-size: 28px;
					color: rgba(255, 255, 255, 0.82);
				}

				.right_content {
					margin-left: 10px;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.title {
						color: #9b9b9c;
						font-size: 13px;
					}

					.desc {
						font-size: 13px;
						color: #6b6b71;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						max-width: 130px;
					}
				}
			}
		}

		.main_con {
			width: 100%;
			height: calc(50vh - 122px - 50px);
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}
		}
	}
</style>